<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.real_name"
        placeholder="姓名"
        style="width: 130px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.mobile"
        placeholder="手机号码"
        style="width: 130px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-select v-model="listQuery.city" placeholder="选择城市" filterable class="filter-item" style="width:130px;" @change="getRegionList">
        <el-option label="请选择城市"  value="" />
        <el-option
          v-for="item in city"
          :key="item.city"
          :label="item.name"
          :value="item.city"
        />
      </el-select>
      <el-select v-model="listQuery.merchant_type" placeholder="商户类型" filterable class="filter-item" style="width: 130px;">
        <el-option label="商户类型" value="" />
        <el-option value="1" label="医美"/>
        <el-option value="2" label="生美"/>
      </el-select>
      <el-select v-model="listQuery.merchant_id" placeholder="请选择商户" filterable class="filter-item" style="width: 130px;">
        <el-option label="请选择商户" value="" />
        <el-option v-for="(item,index) in merchant_list" :label="item.merchant_name" :value="item.merchant_id" />
      </el-select>
      <el-select v-model="listQuery.sale_id" placeholder="请选择销售" filterable class="filter-item" style="width: 130px;">
        <el-option label="请选择销售" value="" />
        <el-option v-for="(item,index) in sale_list" :label="item.real_name" :value="item.sale_id" />

      </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>

    </div>

    <el-table :key="tableKey" v-loading="listLoading" :data="list"  border fit highlight-current-row style="width: 100%;">
      <!-- <el-table-column label="ID" prop="id" align="center">
        <template slot-scope="{row}">
          <span>{{ row.order_id }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="订单号码" align="center">
        <template slot-scope="{row}">
          <span>{{ row.order_sn }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户姓名" align="center">
        <template slot-scope="{row}">
          <span>{{ row.real_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号码" align="center">
        <template slot-scope="{row}">
          <span>{{ row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="身份证号码" align="center">
        <template slot-scope="{row}">
          <span>{{ row.idcard }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商户名称" align="center" width="300">
        <template slot-scope="{row}">
          <span>{{ row.merchant_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center">
        <template slot-scope="{row}">
          <span>{{ row.order_status_name.str }}</span>
        </template>
      </el-table-column>

      <el-table-column label="销售人员" class-name="status-col">
        <template slot-scope="{row}">
          {{ row.sale_name }}
        </template>
      </el-table-column>
      
      <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width" >
        <template slot-scope="{row,$index}" v-if="row.is_paid!=1">
          <el-dropdown :hide-on-click="false" >
            <span class="el-dropdown-link" style="color:#67C23A">
              更多操作
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button size="mini" type="primary" @click="jumpOrderDetail(row.order_id)">
                  订单详情
                </el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button v-if="nodes.indexOf('131')!=-1&&row.order_status<13" size="mini" :disabled="row.disabled" type="warning" @click="editorder(row.order_id)">
                  修改订单
                </el-button>
              </el-dropdown-item>
              
              
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogRecordVisible" width="960px">
      <el-table
        :key="tableRecord"
        v-loading="listRecordLoading"
        :data="record_list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="ID" prop="id" align="center">
          <template slot-scope="{row}">
            <span>{{ row.record_id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="管理类别" align="center">
          <template slot-scope="{row}">
            <span>{{ row.type_name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作人" align="center">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作内容" align="center">
          <template slot-scope="{row}">
            <span>{{ row.content }}</span>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" class-name="status-col">
          <template slot-scope="{row}">

            {{ row.create_time|formatDate }}

          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="recordTotal>0"
        :total="recordTotal"
        :page.sync="listRecordQuery.page"
        :limit.sync="listRecordQuery.limit"
        @pagination="getRecordList"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRecordVisible = false">
          关闭
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  fetchAllList,
  fetchOrderRecordListByOrderId
} from '@/api/order'
import {
  getRegion,backendgetmerchantregion
} from '@/api/finance'
import { formatDate } from '@/utils/formatDate.js'
import waves from '@/directive/waves' // waves directive
import {
  parseTime,
  getNodes
} from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'ComplexTable',
  components: {
    Pagination
  },
  directives: {
    waves
  },
  filters: {
   	formatDate(time) {
   	        time = time * 1000
   	        const date = new Date(time)

   	        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
   	      }
  },
  data() {
    return {
      nodes: [],
      tableKey: 0,
      tableRecord: 1,
      list: null,
      record_list: null,
      listRecordLoading: true,
      recordTotal: 0,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        real_name: '',
        mobile: '',
        idcard: '',
        customer_id: '',
        merchant_id: '',
        sale_id: '',
        order_status: [],
        city: '',
        test:1
      },
      city: [],
      listRecordQuery: {
        page: 1,
        limit: 20,
        order_id: ''
      },
      textMap: {
        record: '订单记录',
        create: 'Create'
      },
      merchant_list: [],
      sale_list: [],
      dialogRecordVisible: false,
      dialogStatus: '',
      downloadLoading: false
    }
  },
  created() {
    this.listQuery.customer_id = this.$route.params.customer_id;
    this.cacheQueryFormat();
    this.getList();
    this.nodes = getNodes();
    this.getRegionList();
    //添加钩子，页面刷新
    window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  mdestroyed() {
    //添加钩子，页面刷新
    window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  methods: {
    beforeunloadFn(e) {
      //刷新页面事件
      sessionStorage.removeItem('orderindex');
    },
    cacheQueryFormat(){
      let cacheQuery = sessionStorage.getItem('orderindex');
      if(cacheQuery){
        this.listQuery = JSON.parse(cacheQuery);
      }
    },
    getRegionList() {
      backendgetmerchantregion(this.listQuery).then(response => {
        if (this.listQuery.city) {
          this.quyu = response.data
        } else {
          this.city = response.data
        }
      })
    },
    jumpOrderDetail(order_id) {
      this.$router.push('/order/detail/' + order_id)
    },
    editorder(order_id) {
      this.$router.push('/order/editorder/' + order_id)
    },
    getList() {
      sessionStorage.setItem('orderindex',JSON.stringify(this.listQuery))
      this.listLoading = true
      fetchAllList(this.listQuery).then(response => {
        this.list = response.data.data.data
        this.total = response.data.data.total
        this.merchant_list = response.data.sale_merchant.merchant
        this.sale_list = response.data.sale_merchant.sale
        setTimeout(() => {
          this.listLoading = false
        }, 0.1 * 1000)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    getRecordList() {
      this.listRecordLoading = true
      fetchOrderRecordListByOrderId(this.listRecordQuery).then(response => {
        this.record_list = response.data.list
        this.recordTotal = response.data.count
        setTimeout(() => {
          this.listRecordLoading = false
        }, 1.0 * 1000)
      })
    },
    handleRecord(order_id) {
      console.log(order_id)
      this.dialogStatus = 'record'
      this.dialogRecordVisible = true
      this.listRecordQuery.order_id = order_id
      fetchOrderRecordListByOrderId(this.listRecordQuery).then(res => {
        this.record_list = res.data.list
        this.recordTotal = res.data.count
        setTimeout(() => {
          this.listRecordLoading = false
        }, 1.0 * 1000)
      })
    },
    

  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    float: left;
  }
</style>
